<template>
    <div>
        <div class="item" v-for="(item,index) of categoryList" :key="index">
            <div class="item-title">
                <span class="item-icon iconfont"></span>
                <span class="title">{{item.title}}</span>
            </div>
            <div v-if="item.children" class="item-children">
                <detail-list :categoryList="item.children"/>
            </div>
        </div>
    </div> 
</template>
<script>
export default {
    name:"DetailList",
    props:{
      categoryList:{
          type:Array
      }
    },
}
</script>
<style lang="scss" scoped>
// @import "~@/assets/style/global.scss"; 引入外部css样式
// @import "style/global.scss"
.item-title{
    display: flex;
    align-items: center;
    line-height: 40px;
    font-size: 32px;
    padding:20px;
    border-bottom: 1px solid #eee;
    text-align: center;
}
 .item-icon{
    width:50px;
    height:50px;
    display: block;
    background-image: url("~@/assets/icon/01.png");
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: 5px -50px;
    }
 .title{
     padding-left: 20px;
     color: #555;
 }
 .item-children{
     padding-left: 30px;
 }
</style>
